<template>
	<div class='login container'>
		<header>
			<van-nav-bar title="找回密码" left-arrow @click-left="goBack" />
		</header>
		<section>
			<div class='login-tel'>
				<input type="text" v-model='userPwd' placeholder="请输入新的密码">
			</div>
			<div class='login-btn' @click='submitBtn'>确认</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'vant';
import http from '@/common/api/request.js'
export default {
	data() {
		return {
			userPwd: '',
			//验证规则
			rules: {//手机号验证
				userPwd: {
					rule: /^\w{6,12}$/,
					msg: '密码不能为空，并且是6-12位'
				}
			}
		}
	},
	components: { Tabbar },
	methods: {
		submitBtn() {
			if (!this.validate('userPwd')) return;
			// 确认修改
			http.$axios({
				url: '/api/recovery',
				method: 'POST',
				data: {
					phone: this.$route.query.phone,
					pwd: this.userPwd
				}
			}).then(res => {
				Toast('修改成功');

				if (res.success) {
					this.$router.push('/login')
				}
			})
		},
		//验证信息提示
		validate(key) {
			let bool = true;
			if (!this.rules[key].rule.test(this[key])) {
				//提示信息
				Toast(this.rules[key].msg);
				bool = false;
				return false;
			}
			return bool;
		},
		goBack() {
			this.$router.back()
		}
	}
}
</script>

<style scoped>
header {
	width: 100%;
	height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
	background-color: #fff;
	height: 58px;
}

::v-deep .van-nav-bar__title {
	color: #1b1b1b;
	font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
	color: #1b1b1b;
	font-size: 0.593333rem;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.32rem;
	background-color: #fff;
}


section div {
	margin: 0.266666rem 0;
	width: 8.933333rem;
	/* height: 1.473333rem; */
}

section input {
	box-sizing: border-box;
	padding: 0 0.266666rem;
	line-height: 1.473333rem;
	background-color: #FFFFFF;
	border-bottom: 1px solid #ccc;
	
}

.login-tel {
	margin-top: 0.8rem;
}

.login-tel input {
	width: 8.933333rem;
}

.login-code {
	display: flex;
	margin-top: 0.8rem;
}

.login-code input {
	flex: 1;
}

.login-code button {
	padding: 0 0.533333rem;
	line-height: 1.473333rem;
	color: #fff;
	background-color: #1b1b1b;
	border: 0;
	border-radius: 6px;
}

.login-btn {
	line-height: 44px;
	color: #fff;
	font-size: 0.48rem;
	text-align: center;
	background-color: #1b1b1b;
	border-radius: 99px;
	margin-top: 0.8rem
}
</style>